import React from 'react';
import {
  StyleSheet,
  ImageBackground,
  SafeAreaView,
  View,
  Text,
  TextInput,
  Button,
  ToastAndroid,
} from 'react-native';

import Clipboard from '@react-native-clipboard/clipboard';

const image = {
  bgUrl: require('./src/assets/images/bg.jpeg'),
};

function App(): React.JSX.Element {
  const [count, setCount] = React.useState(''); // 注数
  const [list, setList] = React.useState([] as string[]);

  const onChangeText = (text: string) => {
    let num = text.replace(/[^0-9]/g, '');

    setCount(num);
  };

  function generateRandomNumber() {
    let randomNumber = '';
    for (let i = 0; i < 7; i++) {
      randomNumber += Math.floor(Math.random() * 10);
    }
    return randomNumber;
  }

  // 开始生成
  const handleSubmit = () => {
    if (Number(count) > 10) {
      ToastAndroid.showWithGravity(
        '最大填入10注',
        ToastAndroid.SHORT,
        ToastAndroid.CENTER,
      );
      setCount('');
      return;
    }

    let currentCount = Number(count ? count : '0');
    let _arr = [];
    for (let i = 0; i < currentCount; i++) {
      let randomString = generateRandomNumber();
      _arr.push(randomString);
    }
    setList(_arr);
  };

  const handleCopy = async () => {
    if (list.length === 0) {
      ToastAndroid.showWithGravity(
        '请生成后再进行复制',
        ToastAndroid.SHORT,
        ToastAndroid.CENTER,
      );
      return;
    }

    Clipboard.setString(list.join('\n'));
    ToastAndroid.showWithGravity(
      '已复制到剪切版',
      ToastAndroid.SHORT,
      ToastAndroid.CENTER,
    );
  };

  const handleClear = () => {
    setCount('');
    setList([]);

    ToastAndroid.showWithGravity(
      '已清空',
      ToastAndroid.SHORT,
      ToastAndroid.CENTER,
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <ImageBackground
        source={image.bgUrl}
        resizeMode="cover"
        style={styles.image}>
        <View style={styles.isCenter}>
          <View>
            <Text style={styles.title}>乐透-七星工具</Text>
            <Text style={styles.subTitle}>
              简介：创新彩票，一键生成7位幸运数字
            </Text>
          </View>
          <View style={styles.card}>
            <View style={styles.inputBox}>
              <Text style={styles.inputBoxText}>
                当前输入的注数：{count ? count : '0'}
              </Text>
              <TextInput
                style={styles.inputText}
                keyboardType="numeric"
                placeholder="请输入生成的注数（正整数1至10）"
                onChangeText={text => onChangeText(text)}
                value={count}
              />
            </View>
            <Button onPress={handleSubmit} title="开始生成" />
          </View>
          <View style={styles.card}>
            <View style={styles.cardTop}>
              <Text style={styles.resultTitle}>生成结果：</Text>
              <View style={styles.cardTopBtns}>
                <View style={styles.btn1}>
                  <Button onPress={handleCopy} title="复制" />
                </View>
                <View style={styles.btn2}>
                  <Button onPress={handleClear} title="清空" />
                </View>
              </View>
            </View>
            <View style={styles.list}>
              {list.map((item, index) => {
                return (
                  <Text style={styles.listText} key={index}>
                    {item}
                  </Text>
                );
              })}
            </View>
          </View>
        </View>
      </ImageBackground>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  isCenter: {
    flex: 1,
    alignItems: 'center',
  },
  container: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
  image: {
    flex: 1,
  },
  title: {
    marginTop: 32,
    textAlign: 'center',
    fontSize: 32,
    fontWeight: 'bold',
    color: '#000000',
  },
  subTitle: {
    marginTop: 8,
    marginBottom: 8,
    fontSize: 14,
    color: '#333333',
  },
  card: {
    width: '90%',
    height: 'auto',
    borderRadius: 6,
    padding: 20,
    backgroundColor: 'rgba(255, 255, 255, 0.5)',
    marginBottom: 20,
  },
  inputBox: {
    marginBottom: 20,
  },
  inputBoxText: {
    fontSize: 16,
    fontWeight: '500',
    color: '#000000',
    marginBottom: 8,
  },
  inputText: {
    height: 40,
    padding: 0,
    paddingLeft: 10,
    borderColor: 'gray',
    borderWidth: 1,
    fontSize: 16,
    color: '#000000',
  },
  inputLabel: {
    fontSize: 18,
    fontWeight: '600',
    color: '#000000',
  },
  cardTop: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  resultTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#000000',
  },
  cardTopBtns: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  btn1: {
    width: 60,
    marginRight: 10,
  },
  btn2: {
    width: 60,
  },
  list: {
    marginTop: 10,
    paddingLeft: 20,
  },
  listText: {
    fontSize: 16,
    fontWeight: '500',
    color: '#000000',
  },
});

export default App;
